<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 100%;
        }
        nav{
            display: flex;
            justify-content: space-between;
            line-height: 60px;
            height: 60px;
            color: white;
            background-color: cornflowerblue;
            padding:0 30px;
        }
        ul{
            text-align: left;
            color: white;
            width: 200px;
            height: 900px;
            list-style: none;
            background-color:rgb(64, 64, 135) ;
        }
        ul li{
            width: 200px;
            height: 30px;
            padding-left: 25px;
            box-sizing: border-box;
            border: 1px solid white;
        }
        ul li:hover{
            background-color: red;
        }
        ul span{
            padding-left: 15px;
            padding-right: 60px;
        }
        .content .box{
            display: flex;
            width: 100%;
            height: 900px;
            background-color: #f5f6fa;
            /* border: 1px solid black; */
        }
        .right{
            padding: 10px;
            flex: 1;
            border: 1px solid black;
        }
        .right .shang{
            display: flex;
            justify-content: space-between;
        }
        .right span:nth-child(1){
            background-color: blue;
            margin-left: 5px;
        }
        .right .xia{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .right .xia span{
            display: block;
            width: 300px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
        }
        .right .xia span:nth-child(2){
            background-color: aqua;
        }
        .right .xia span:nth-child(3){
            background-color: rgb(0, 255, 0);
        }
        .right .xia span:nth-child(4){
            background-color: saddlebrown;
        }
        .right .tubiao{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }
        .right .tubiao .bar{
            width: 635px;
            height: 400px;
            /* border: 1px solid gray; */
            background-color: white;
        }
        .right .tubiao .line{
            width: 635px;
            height: 400px;
            /* border: 1px solid gray; */
            background-color: white;
        }
        .right .biaoge {
            margin-top: 10px;
            width: 100%;
            height: 500px;
            /* border: 1px solid black; */
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

    </style>
</head>
<body>
    <div class="content">
        <nav>
            <span class="iconfont icon-liebiao">&emsp;后台管理系统</span>
            <span>当前用户:&emsp;bootstrap中文角色:&emsp;管理员</span>
        </nav>
        <div class="box">
            <ul>
                <li class="iconfont icon-yingyongzhongxin"><span>后台首页</span>></li>
                <li class="iconfont icon-yuanquan"><span>设计元素</span>></li>
                <li class="iconfont icon-renxiang"><span>表单元素</span>></li>
                <li class="iconfont icon-liwuhe"><span>设计表格</span>></li>
                <li class="iconfont icon-xinfeng"><span>数据展示</span>></li>
                <li class="iconfont icon-jiahao"><span>后台管理</span>></li>
                <li class="iconfont icon-yingyongzhongxin"><span>设计程序</span>></li>
                <li class="iconfont icon-renxiang"><span>原理展示</span>></li>
                <li class="iconfont icon-pages"><span>后台数据</span>></li>
                <li class="iconfont iconfont icon-shu"><span>后台首页</span>></li>
            </ul>
            <div class="right">
                <div class="shang">
                    <div class="iconfont icon-shu"><span>欢迎首页</span></div>
                    <span>>>页签操作﹀</span>
                </div>
                <div class="xia">
                     <span>今日收入:100,000,00</span>
                     <span>今日收入:200,000,00</span>
                     <span>今日收入:100,000,00</span>
                     <span>今日收入:500,000,00</span>
                </div>
                <div class="tubiao">
                    <div class="bar"></div>
                    <div class="line"></div>   
                </div>
                <div class="biaoge">
                    <table border="1" width="99%" height="330" cellspacing="0" style="text-align: center;background-color: white;">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>订单号</th>
                                <th>商品名称</th>
                                <th>订单日期</th>
                                <th>状态</th>
                                <th>处理情况</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 存放数据 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./mock.js"></script>
<script src="./2.js"></script>
<script>
    function render(arr){
        document.querySelector('tbody').innerHTML=arr.map((item)=>{
            return`
            <tr>
                <td>${item.id}</td>
                <td>${item.count}</td>
                <td>${item.class}</td>
                <td>${item.date}</td>
                <td>${item.good}</td>
                <td>${item.sta}</td>
             </tr>
            `
        }).join('')
    }
    ajax('get','./data.json',{}).then((arr)=>{
        render(arr)
    })
    // =================================
     var obj = Mock.mock({
        'list1|12': [
            ' @natural(10, 100)'
        ],
        'list2|12': [
            ' @integer(10, 100)'
        ],
    })
    var con = document.querySelector('.right>.tubiao>.bar');
    var e = echarts.init(con);
    //2.绘制图表
    e.setOption({
        title: { //图表的标题
            text: '每年收入'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['2009', '2010', '2011', '2012', '2013', '2014', '2015','2016','2017','2018']
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: '每年收入走势',
                type: 'line',
                data: obj.list1,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            },
            {
                name: '同期收入走势',
                type: 'line',
                data: obj.list2,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }

            }

        ]
    });

    // =====================================
    var con = document.querySelector('.right>.tubiao>.line');
    var e2 = echarts.init(con);
    //2.绘制图表
    e2.setOption({
        title: { //图表的标题
            text: '每月收入走势'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11','12']
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: '当年每月收入',
                type: 'bar',
                data: obj.list1,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            },
            {
                name: '同期每月收入',
                type: 'bar',
                data: obj.list2,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }

            }

        ]
    });
</script>